{% extends "base.html" %}
{%  block title %}图书列表页{% endblock %}
{% block content %}
<div class="container">
    <table class="table table-striped">
        <thead>
        <tr>
            <th scope="col">id</th>
            <th scope="col">书名</th>
            <th scope="col">作者</th>
            <th scope="col">在管数量</th>
            <th scope="col">描述</th>
            <th scope="col">还书</th>
        </tr>
        </thead>
        <tbody>
        {% for book in books %}
        <tr>
            <th scope="row" class="align-middle">{{ book.id }}</th>
            <td class="align-middle"><a href="{% url 'bookcms:detail' book.id %}"> {{ book.name }}</a></td>
            <td class="align-middle">{{ book.author }}</td>
            <td class="align-middle">{{ book.nums }}</td>
            <td class="align-middle">{{book.description}}</td>
            <td>
                <a
                        class="btn btn  btn-primary"
                        onclick="book_borrow()">
                    还书
                </a>
                <a id="book_return" href="{% url 'bookcms:return' book.id  %}"></a>
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
<script>
        function book_borrow() {
            // 调用layer弹窗组件
            layer.open({
                title: "确认还书{{ book.name }}",
                content: "确认还书?",
                yes: function(index, layero) {
                    document.getElementById("book_return").click();
                    layer.close(index);
                },
            })
        }

</script>
{% endblock content %}